<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />        
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
<meta content="telephone=no" name="format-detection" /> 
<title>修改接收方式</title>
<link rel="stylesheet" href="css/modifyTel.css">
</head>
<body>
<div class="container">
	<div class="items-wrap">
		<div class="mobile item active">
			<div class="item-l">
				<span>手机短信</span>
			</div>
			<div class="item-r">
				<div class="tel-box">
					<span>18617358749</span>
					<i></i>
				</div>
				<input type="text" name="tel" placeholder="请输入手机">
				
			</div>
		</div>

		<div class="email item">
			<div class="item-l">
				<span>邮箱</span>
			</div>
			<div class="item-r">
				<div class="tel-box">
					<span>wuzhi892@qq.com</span>
					<i></i>
				</div>
				<input type="text" name="mail" placeholder="请输入邮箱">
				
			</div>
		</div>

	</div>

	<a href="javascript:;" class="save">保存</a>

</div>

<!-- 错误提示框 -->
<div class="alert-box"></div>


<script src="js/build/lib.js" type="text/javascript"></script>

<script>
var modifyTel = {
	init: function(){
		// 兼容按压效果
		document.body.addEventListener('touchstart', function () { //...空函数即可
		});
		this.initData();
	},
	initData: function(){
		var _tel = sessionStorage.getItem("tel");
		var _mail = sessionStorage.getItem("mail");

		$('.mobile .item-r').find('span').text(_tel);
        $('.email .item-r').find('span').text(_mail);
	},
	events: function(){
		$('.item-l').hammer().on('tap',function(){
			$(this)
				.parent()
				.toggleClass('active');
		});

		// 手机号编辑
		$('.item').find('.tel-box').hammer().on('tap',function(){
			// var _text = $(this).parent().parent().find('.item-l').find('span').text();
            var _tel = $(this).find('span').text();
            var _item = $(this).parent().parent();

            $(this).hide();
			if(_item.hasClass('mobile')){
				$(this)
					.siblings('input[name="tel"]')
					.val(_tel)
					.show()
					.focus();
			}else{
				$(this)
					.siblings('input[name="mail"]')
					.val(_tel)
					.show()
					.focus();
			}
		});
		$('.item').find('.item-r input[type="text"]').blur(function(){
			var _tel = $(this).val();

			$(this).hide();
			$(this)
				.siblings('.tel-box')
				.show(1)
				.find('span')
				.text(_tel);

		});

	},
	vertify: function(){
		var _this = this;
		$('.save').hammer().on('tap',function(){
			$('.item .item-r ').find('input[type="text"]:visible').trigger('blur');

			var _tel = $.trim($('.mobile .item-r').find('span').text());
            var _mail = $.trim($('.email .item-r').find('span').text());
			if(!$('.active').size()){
				_this.alert('请选择一个修改项!');
				return false;
			}

			if($('.mobile').hasClass('active')){
				if(_tel ==''){
					_this.alert('电话号码不能为空!');
					return false;
				}

				if (!/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(_tel)) {
					_this.alert('电话号码不合法!');
					return false;
				}

				sessionStorage.setItem("tel", _tel); 
			}
			
			if($('.email').hasClass('active')){
				if(_mail ==''){
					_this.alert('邮箱不能为空哦!');
					return false;
				}

				if(!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(_mail)){
					_this.alert('邮件不对呀，哥!');
					return false;
				}

				sessionStorage.setItem("mail", _mail); 
			}

			window.location = "affirmOrder.html";

		});
	},
	alert: function(_txt){
		$('.alert-box')
			.text(_txt)
			.stop()
			.show(1)
			.delay(1500)
			.hide(1);
	},
	run: function(){
		this.init();
		this.events();
		this.vertify();
	}
};
modifyTel.run();
</script>
</body>
</html>